<template>
    <div class="swiper">
        <mt-swipe :auto="2000" >
            <mt-swipe-item>
                <img src="http://7xlosx.com1.z0.glb.clouddn.com/APPerweima.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="http://7xlosx.com1.z0.glb.clouddn.com/BMS%E8%99%9A%E6%8B%9F%E5%B1%95%E4%BD%8Dbanner-01.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="http://7xlosx.com1.z0.glb.clouddn.com/%E8%BE%89%E7%91%9Ebanner.pic_hd.jpg" alt="">
            </mt-swipe-item>
        </mt-swipe>
    </div>

</template>

<script>
import lyhHeader from '@/components/Header.vue'
import ajax from '@/ajax/ajax.js'

export default {
  name: 'swiper',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      bannerItems: []
    }
  },
  components: {lyhHeader},
  methods: {
    goHall () {
      this.$router.push({name: 'Hall'})
    }
  },
  created () {
    console.log('swiper created')
    ajax.post('getbannerlist', {}).then(data => {
        console.log(data)
        this.bannerItems = data.bannerItems
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

    .swiper {
        height: 200px;
        background-color: #e1e1e1;
        overflow: hidden;

        .mint-swipe-item > img {
            width: 100%;
            height: 100%;
        }
    }


</style>
